<template>
  <section
    :class="[
      'logo-wrap',
      isCollapse && layout !== 'mix' ? 'center' : '',
      `logo-wrap__${layout}`
    ]"
  >
    <router-link
      v-if="!isCollapse || layout === 'top'"
      to="/"
      :class="[
        'logo-content',
        layout === 'mix' ? 'logo-content__mix' : ''
      ]"
    >
      <img
        :src="appLogo"
        :class="['sidebar-logo', $route.meta.hideAside || layout !== 'side' ? 'ml-4' : '']"
      >
      <span class="maia-system-title">{{ appNameZh }}</span>
    </router-link>

    <section
      v-if="!$route.meta.hideAside && layout !== 'top'"
      id="asideCollapse"
      class="collapse"
    >
      <span
        v-if="isCollapse"
        :class="['collapse-btn', 'open', layout === 'mix' ? 'mix' : '']"
        @click="collapseToggle(false)"
      >
        <base-svg-icon
          icon-class="btn-collapse"
          class-name="btn"
        />
      </span>
      <span
        v-else
        class="collapse-btn"
        @click="collapseToggle(true)"
      >
        <base-svg-icon
          icon-class="btn-collapse"
          class-name="btn"
        />
      </span>
    </section>
  </section>
</template>
<script lang="ts" setup="logo">
import { computed } from 'vue';

import { useAppStore } from '@/store/app';

defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
});

const {
  VITE_APP_LOGO_DIR: appLogo,
  VITE_APP_NAME_ZH: appNameZh,
} = import.meta.env;

const layout = computed(() => useAppStore().layout);
const collapseToggle = (value: boolean) => {
  useAppStore().setCollapseStatus(value);
};
</script>

<style lang="scss" scoped>
  .logo-wrap {
    @include flex-box;

    box-sizing: border-box;
    height: var(--maia-nav-header-height);
    padding-right: 10px;

    .logo-content {
      display: flex;
      align-items: center;
    }

    .sidebar-logo {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      margin-left: 16px;

      &.ml-4 {
        margin-left: 4px;
      }
    }

    // 左侧导航中的系统名称
    .maia-system-title {
      min-width: 100px;
      font-size: var(--#{$namespace}-font-size-medium);
      font-weight: var(--#{$namespace}-font-weight-primary);
    }

    &.center {
      justify-content: center;
      padding-right: 0;
    }

    &.logo-wrap__mix {
      margin-right: 12px;
    }
  }

  .collapse {
    .collapse-btn {
      padding: 4px 6px;
      font-size: 20px;
      cursor: pointer;

      &.open {
        &:not(.mix) {
          margin-right: 0;
        }

        .btn {
          transform: rotate(180deg);
        }
      }
    }
  }
</style>
